<template>
  <div class="dashboard-page">
    <!-- 欢迎横幅 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-info">
          <h2>欢迎回来，管理员</h2>
          <p>上次登录: {{ lastLoginTime }}</p>
        </div>
        <div class="welcome-actions">
          <el-button type="primary">发布内容</el-button>
          <el-button>查看统计</el-button>
        </div>
      </div>
    </el-card>

    <!-- 数据概览卡片 -->
    <div class="data-overview">
      <el-card v-for="(stat, index) in statsData" :key="index" class="stat-card">
        <div class="stat-icon" :class="stat.iconClass">
          <el-icon>
            <component :is="stat.icon"></component>
          </el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-change" :class="stat.trend">
            <span v-if="stat.trend === 'up'">↑</span>
            <span v-else-if="stat.trend === 'down'">↓</span>
            {{ stat.change }}
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区 -->
    <div class="chart-section">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <h3>访问趋势</h3>
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div class="chart-placeholder">
          <div class="chart-lines">
            <div v-for="i in 5" :key="i" class="chart-line" :style="{ height: Math.random() * 70 + 10 + '%' }"></div>
          </div>
          <div class="chart-labels">
            <span v-for="(day, i) in chartLabels" :key="i">{{ day }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 最近活动和快速操作 -->
    <div class="bottom-section">
      <el-card class="recent-activity">
        <template #header>
          <div class="card-header">
            <h3>最近活动</h3>
            <el-button text>查看全部</el-button>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in recentActivities"
            :key="index"
            :timestamp="activity.time"
            :type="activity.type"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <el-card class="quick-actions">
        <template #header>
          <div class="card-header">
            <h3>快速操作</h3>
          </div>
        </template>
        <div class="action-grid">
          <el-button v-for="(action, index) in quickActions" :key="index" :icon="action.icon">
            {{ action.label }}
          </el-button>
        </div>
      </el-card>
    </div>

    <!-- 系统信息 -->
    <el-card class="system-info">
      <template #header>
        <div class="card-header">
          <h3>系统信息</h3>
        </div>
      </template>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="系统版本">V 1.0.0</el-descriptions-item>
        <el-descriptions-item label="服务器状态">运行中</el-descriptions-item>
        <el-descriptions-item label="数据库状态">正常</el-descriptions-item>
        <el-descriptions-item label="最近备份">2023-07-23 08:00:00</el-descriptions-item>
        <el-descriptions-item label="系统更新">可用</el-descriptions-item>
        <el-descriptions-item label="安全状态">安全</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { 
  View, UserFilled, PictureRounded, Bell, 
  Plus, Setting, Document, Upload, Download
} from '@element-plus/icons-vue'

// 上次登录时间
const lastLoginTime = '2023-07-24 09:36:12'

// 统计数据
const statsData = [
  {
    title: '浏览量',
    value: '2,893',
    change: '13.2%',
    trend: 'up',
    icon: 'View',
    iconClass: 'blue-icon'
  },
  {
    title: '用户数',
    value: '568',
    change: '5.6%',
    trend: 'up',
    icon: 'UserFilled',
    iconClass: 'green-icon'
  },
  {
    title: '内容数',
    value: '124',
    change: '2.1%',
    trend: 'up',
    icon: 'Document',
    iconClass: 'orange-icon'
  },
  {
    title: '待处理',
    value: '12',
    change: '8.3%',
    trend: 'down',
    icon: 'Bell',
    iconClass: 'red-icon'
  }
]

// 时间范围选择
const timeRange = ref('week')

// 图表标签
const chartLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

// 最近活动
const recentActivities = [
  { content: '新增文章《夏季美容技巧分享》', time: '10分钟前', type: 'primary' },
  { content: '用户张某某完成注册', time: '1小时前', type: 'success' },
  { content: '系统数据备份完成', time: '3小时前', type: 'info' },
  { content: '管理员更新了产品信息', time: '昨天', type: 'warning' }
]

// 快速操作
const quickActions = [
  { label: '添加内容', icon: 'Plus' },
  { label: '用户管理', icon: 'UserFilled' },
  { label: '系统设置', icon: 'Setting' },
  { label: '数据备份', icon: 'Upload' },
  { label: '数据恢复', icon: 'Download' }
]

// 页面加载
onMounted(() => {
  console.log('仪表盘页面已加载')
})
</script>

<style scoped>
.dashboard-page {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #e0f2ff 0%, #f0f7ff 100%);
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-info h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
}

.welcome-info p {
  margin: 0;
  color: #666;
}

.data-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon :deep(.el-icon) {
  font-size: 24px;
  color: white;
}

.blue-icon {
  background-color: #409eff;
}

.green-icon {
  background-color: #67c23a;
}

.orange-icon {
  background-color: #e6a23c;
}

.red-icon {
  background-color: #f56c6c;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

.stat-title {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.stat-change {
  font-size: 13px;
}

.stat-change.up {
  color: #67c23a;
}

.stat-change.down {
  color: #f56c6c;
}

.chart-section {
  margin-bottom: 24px;
}

.chart-card {
  width: 100%;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chart-lines {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 30px;
}

.chart-line {
  flex: 1;
  background: linear-gradient(to top, #409eff, #a0cfff);
  border-radius: 4px 4px 0 0;
  margin: 0 5px;
  transition: height 0.5s;
}

.chart-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.chart-labels span {
  color: #666;
  font-size: 12px;
}

.bottom-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.system-info {
  margin-bottom: 24px;
}

@media (max-width: 992px) {
  .data-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bottom-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .data-overview {
    grid-template-columns: 1fr;
  }
  
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .welcome-actions {
    margin-top: 16px;
  }
}
</style> 